<template>
  <div class="container" :style="'height:' + height" v-loading="loading">
    <el-table :data="list" style="width: 100%" @cell-click="goPlay">
      <el-table-column label="序号" width="100">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="歌名"> </el-table-column>

      <el-table-column label="歌手">
        <template #default="scope">
          <span v-for="(item, index) in scope.row.ar" :key="item.id">{{ item.name }} {{ scope.row.ar.length == index + 1 ? '' : '，' }} </span>
        </template>
      </el-table-column>

      <el-table-column label="专辑">
        <template #default="scope">
          {{ scope.row.al.name }}
        </template>
      </el-table-column>

      <el-table-column label="时长">
        <template #default="scope">
          {{ dateFormat(scope.row.dt) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { artistsSongs, albumDteail, search } from '../../request/api'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

export default {
  name: 'MusicList',
  data() {
    return {
      list: [],
      loading: false,
      height: 'none',
    }
  },
  created() {
    const { type, id } = this.$route.params

    if (type == 'album') {
      this.loading = true
      this.height = 'calc(100vh - 160px)'

      albumDteail({ id }).then(res => {
        this.loading = false
        this.height = 'none'

        if (res.code == 200) {
          this.list = res.songs
        }
      })
    }

    if (type == 'artists') {
      this.loading = true
      this.height = 'calc(100vh - 160px)'

      artistsSongs({ id }).then(res => {
        this.loading = false
        this.height = 'none'

        if (res.code == 200) {
          this.list = res.hotSongs
        }
      })
    }

    if (type == 'search') {
      this.loading = true
      this.height = 'calc(100vh - 160px)'

      search({ keywords: id }).then(res => {
        this.loading = false
        this.height = 'none'

        if (res.code == 200) {
          this.list = res.result.songs
        }
      })
    }
  },

  watch: {
    $route(route) {
      const { type, id } = route.params

      if (type == 'search') {
        this.loading = true
        this.height = 'calc(100vh - 160px)'
        search({ keywords: id }).then(res => {
          if (res.code == 200) {
            this.loading = false
            this.height = 'none'
            this.list = res.result.songs
          }
        })
      }
    },
  },

  methods: {
    dateFormat(ms) {
      return dayjs.duration(ms).format('mm:ss')
    },

    goPlay(row) {
      let list = this.list.map(item => item.privilege.id)
      let list2 = list.splice(list.findIndex(i => i == row.privilege.id))
      this.$router.push({ name: 'musicPlay', params: { id: row.privilege.id, list: [...list2, ...list] } })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
  overflow: hidden;
}
</style>
